<template>
  <div class="home">
    <div class="recommend">推荐歌单</div>
    <van-row>
      <van-col span="8" v-for="item in songList" :key="item.id">
        <van-image
          width="100%"
          height="100"
          :src="item.picUrl"
        />
        <p class="desc">{{ item.name }}</p>
      </van-col>
    </van-row>

    <div class="recommend">最新音乐</div>
    <!-- <slot></slot> <slot name="title"></slot> -->
    <MusicItem
    v-for="item in newList"
    :key="item.id"
    :name="item.name"
    :authorName="item.song.artists[0].name"
    :id="item.id"
    />
  </div>
</template>

<script>
import { getSongList, getNewSongList } from '@/api/recommend.js'
import MusicItem from '@/components/MusicItem.vue'
export default {
  data () {
    return {
      songList: [],
      newList: []
    }
  },

  components: {
    MusicItem
  },

  created () {
    this.getPersonalized()
    this.getNewMusic()
  },

  methods: {
    // 获取歌单数据
    async getPersonalized () {
      const res = await getSongList({
        limit: 6
      })
      this.songList = res.data.result
    },
    // 获取新音乐
    async getNewMusic () {
      const res = await getNewSongList({
        limit: 20
      })
      this.newList = res.data.result
    }
  }
}
</script>

<style scoped lang='less'>
.recommend {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  background-color: #c71d24;
  color: #fff;
  padding: 0 10px;
}

.desc {
  font-size: 12px;
}

.van-col {
  margin: 10px 0;
}
</style>
